<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/element-plus.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: rgb(1, 1, 29);
    }

    .app {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .container {
        flex: 1;
        background-image: url(./img/image1.png);
        background-size: 100% 100%;
        position: relative;
    }

    .box {
        /* background-color: red; */
    }

    .el-dialog{
        background-color: rgb(1, 1, 29);
    }

    .item {
        color: #fff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(./img/image.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding: 20px 30px;
        box-sizing: border-box;
    }

    .item_left {
        font-size: 20px;
        font-weight: 700;
    }

    .item_content {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-flow: wrap row;
    }

    .item_right_content {
        width: 50%;
        flex-shrink: 0;
        margin: 10px 0;
    }



    .box1 {
        width: 4%;
        height: 4%;
        position: absolute;
        top: 50%;
        left: 79%;
    }
    .box2{
        width: 4%;
        height: 4%;
        position: absolute;
        top: 50%;
        left: 94.8%;
    }

    .box3{
        width: 4%;
        height: 4%;
        position: absolute;
        top: 50%;
        left: 47%;
    }
    .box4{
        width: 4%;
        height: 4%;
        position: absolute;
        top: 50%;
        left: 34%;
    }
    .box5{
        width: 2%;
        height: 7%;
        position: absolute;
        top: 64%;
        left: 18%;
    }
    .box6{
        width: 10%;
        height: 11.3%;
        position: absolute;
        top: 1.8%;
        left: 38%;
    }
    .box7{
        width: 10%;
        height: 11.6%;
        position: absolute;
        top: 13.4%;
        left: 38%;
    }
    .box8{
        width: 3%;
        height: 22.7%;
        position: absolute;
        top: 1.8%;
        left: 48%;
        z-index: 10;
    }
    .box9{
        width: 5%;
        height: 12.4%;
        position: absolute;
        top: 1.8%;
        left: 51%;
    }
    .box10{
        width: 4%;
        height: 12.4%;
        position: absolute;
        top: 25%;
        left: 52%;
    }

    .box{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pulse-icon {
	  display: inline-block;
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background-color: rgb(222, 34, 255);
	  position: relative;
	  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
	}
	
	.pulse-icon:after {
	  content: "";
	  box-shadow: 0 0 6px 2px rgb(34, 63, 255);
	  animation: pulsate 1s ease-out;
	  animation-iteration-count: infinite;
	  animation-delay: 1.1s;
	  -webkit-border-radius: 100%;
	  border-radius: 100%;
	  height: 300%;
	  width: 300%;
	  animation: pulsate 2s infinite;
	  position: absolute;
	  margin: -100% 0 0 -100%;
	}
		@keyframes pulsate {
		  0% {
		    transform: scale(0.1, 0.1);
		    opacity: 0;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    filter: alpha(opacity=0);
		  }
		
		  50% {
		    opacity: 1;
		    -ms-filter: none;
		    filter: none;
		  }
		
		  100% {
		    transform: scale(1.2, 1.2);
		    opacity: 0;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    filter: alpha(opacity=0);
		  }
		}
</style>

<body>
    <div class="app" id="app">
        <div class="nav">江汉大学智慧实验室</div>
        <div class="nav_btn">
            <div class="btn_left">
                <a href="./index.html">
                <div class="btn_list">首页</div>
                 </a>
                <a href="./index1.html">
                    <div class="btn_list listActive">2F</div>
                </a>
                <a href="./index2.html">

                <div class="btn_list ">3F</div>
            </a>
            </div>
            <div class="btn_right">
                <div class="btn_list1">支持单位： 新天普</div>
            </div>
        </div>
        <div class="container">
            <div class="box box1" @click="handBtn('202通风柜')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box2" @click="handBtn('201通风柜')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box3" @click="handBtn('204通风柜')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box4" @click="handBtn('205通风柜')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box5" @click="handBtn('206通风柜')">
                <div class="pulse-icon">
                </div>
            </div>

            <div class="box box6" @click="handBtn('生物医学实验室2','Second')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box7" @click="handBtn('生物医学实验室1','Second')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box8" @click="handBtn('洁净走廊','Second')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box9" @click="handBtn('缓冲间','Second')">
                <div class="pulse-icon">
                </div>
            </div>
            <div class="box box10" @click="handBtn('更衣室','Second')">
                <div class="pulse-icon">
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" width="550" z-index="9999">
            <div class="item">
                <div class="item_left">
                    {{title}}
                </div>
                <div class="item_content">
                    <template class="item_right" v-for="(el,i) in Object.entries(itemInfo).sort((a, b) => {
                        const sortA = a[1].sort !== undefined ? a[1].sort : Infinity;
                        const sortB = b[1].sort !== undefined ? b[1].sort : Infinity;
                        return sortA - sortB;
                    })" :key="i">
                        <template v-if="el[1].display">
                            <div class="item_right_content">
                                <div v-if="typeof el[1].value == 'number'">
                                    <span class="btn-bg">{{el[0]}}</span> &nbsp; {{el[1].value}} {{el[1].unit}}
                                    &nbsp;
                                </div>
                                <template v-else>
                                    <span class="btn-bg">{{el[0]}}</span>
                                    &nbsp;
                                    <span>
                                        {{el[1].value?'开启':'关闭'}}
                                    </span>
                                </template>
                            </div>
                        </template>
                    </template>
                </div>
            </div>
        </el-dialog>
    </div>
</body>
<script src="./js/vue.global.js"></script>
<script src="./js/element-plus.js"></script>
<script>
    const { createApp, ref, onMounted, reactive, nextTick } = Vue;
    let count = 0;
    createApp({

        setup() {
            const info = ref({});
            const dialogVisible = ref(false);
            const itemInfo = ref({})
            const title = ref()


            onMounted(async () => {
                const fetchData = async () => {
                    try {
                        const res = await fetch('http://127.0.0.1:5000/data')
                            .then(res => res.json());
                        info.value = res;
                        count++;
                        updateData(res['2F'].Second);
                    } catch (error) {
                        console.error('Failed to fetch data:', error);
                    } finally {
                        loading.value = false;
                    }
                };
                fetchData();

            });


            const handBtn = (name, type = 'First') => {
                console.log(info.value['2F'][type][name], name);
                itemInfo.value = info.value['2F'][type][name];
                title.value = name;
                dialogVisible.value = true;
            }

            return {
                title,
                info,
                dialogVisible,
                handBtn,
                itemInfo
            };
        }
    }).use(ElementPlus).mount('#app');
</script>

</html>